<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
			<navbar :bgColor="bgColor" :btnColors='btnColor' title="意见反馈" :isGoBack="true" :isNotice="true" :visible="true"></navbar>
		<!-- #endif -->
		<view >
		  <form bindsubmit="formSubmit" class="pl-10 pr-10 pt-20 border-radius">
			<view class="opinion_wrap pl-20">			
				  <view class="backtitle">
					<text style="font-weight: 500;font-size: 32rpx;color: #222222;">意见反馈</text>
				  </view>
				  <view class="showImages mt-15">
					<textarea @input="setMessage"  :data-order-id="item.order_goods_id"  placeholder-class="message-placeholder" maxlength="100"  placeholder="请在这里输入您的宝贵意见或建议，您的意见对我们非常重要！" class="setMessage pl-20 pt-20 pr-20" />
				  </view> 							
				<view class="ml-10 mt-15">
				   <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deleteImg" 		name="1" 		multiple		:maxCount="4"	></u-upload>
				</view> 
			</view>	
			
			<view class="opinion_wrap justify-between mt-30 pt-30 pl-30 pb-30 pr-30">
				<text>联系方式</text>
				<view class="">
					<u--input
					    placeholder="请输入内容"
						placeholder-style="text-align: right;"
					    border="none"
					    clearable
						v-model="phone"
					  ></u--input>
				</view>
				
			</view>
							  
			<button @click="submit" >提交</button>
		  </form>
		</view> 		 
	</view>	
</template>

<script>
	export default {
		data () {
			return {
				...getApp().globalData.config,				
				fileList:[],	
				content:'',
				phone:''
			}			
		},		
		onLoad(e) {			
			
		},		
		methods:{
			 ...getApp().globalData.function,	
			
			setMessage(e){
				this.content=e.detail.value
				console.log(e)
			},		 
			async  afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					if(result.success){
						let item = this.fileList[fileListLen]
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
						 uni.showToast({ title: '上传成功', icon: 'none' })
					}else{
						this.fileList.splice(fileListLen, 1)
					}					
				}
				
			},
				  
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.api_url+'/api/index/uploadImages', // 仅为示例，非真实的接口地址,换成自己上传图片的接口
						filePath: url,
						name: 'file',
						success: (uploadRes) => {
							setTimeout(()=>{
								let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式								
								resolve({success:true,url:res.data.image})
							},2000)
							
						}
					});
				})
			},			
			  /* 删除图片*/
			deleteImg(event) {
				var image_index = event.index
				var fileList_new = this.fileList;
				fileList_new.splice(image_index,1);
			},
			
			submit(e){
				let obj={
					images:this.fileList,
					content:this.content,
					phone:this.phone
				}
				
				if(!obj.content){
					this.$showToast('请填写反馈信息！')
					return false
				}
				if(!obj.phone){
					this.$showToast('请填写手机号！')
					return false
				}	
				// if(obj.images.length<=0){
				// 	this.$showToast('请上传图片信息！')
				// 	return false
				// }						
				obj.token=uni.getStorageSync('userInfo').token
				
				
				this.$http.dofeedback(obj).then(re=>{
					if(re.resCode=='9999'){
						this.$showToast(re.resMessage)
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/mine/index'
							});			
						},3000)				
					}else{
						this.$showToast(re.resMessage)
						return false
					}
				})			
			},			
		}
	}
</script>

<style>
	page{
		background-color: #F0F9FE ;
	}
	
	.backtitle{
		padding-left: 20rpx;
		padding-top: 20rpx;
		
	}
	.message-placeholder{
		margin-top: 20rpx;
		padding-top: 20rpx;
		font-size: 13px;
		line-height: 35rpx;
		text-align: center;
	}
	/* .showImages{
		display: flex;
		margin:20rpx 10rpx;
	} */
	.setMessage{
		width: 638rpx;
		height: 266rpx;
		background: #F0F9FE;
		border-radius: 23rpx 23rpx 23rpx 23rpx;
		line-height: 26rpx;
	}
	
	.fsz_info{
		display: flex;
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(1, 31, 55, 0.6);
		line-height: 7rpx;
	}
	.opinion_wrap{
		display: flex;
		flex-wrap: wrap;		
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 27rpx;		
		flex-direction: row;
		background: #FFFFFF;
		border-radius: 32rpx;
	}
	button::after{
		border: none;
	}
	.box{
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  overflow: hidden;
	  width: 100%;
	  height: 100vh;
	  z-index: 8;
	}
	.black{
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100vh;
	  background: rgba(0, 0, 0, .5);
	  z-index: 10;
	}
	.nr{
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 500rpx;
	  z-index: 12;
	  background: #FFF;
	}
	.item{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  padding: 0 20rpx;
	  box-sizing: border-box;
	  border-bottom: 1px solid #EEE;
	}

	
	.uni-form-item{
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
		height: 90rpx;
		font-size: 30rpx;
		padding-left: 45rpx;		
	}
	
	button{
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: white;
		border: none;
		width: 85%;
		padding: 5rpx 0rpx;
		position: absolute; /* 设置按钮为绝对定位 */
		bottom: 0; /* 距离底边为0 */
		left: 50%; /* 左侧距离父元素宽度的50% */
		transform: translateX(-50%); /* 向左移动自身宽度的50%，保持水平居中 */	
		background: #36B3E9;
		border-radius: 40rpx;
		font-size: 30rpx;
		height: 88rpx;
		margin-bottom: 25rpx;
	}
</style>